<template>
	<view>
		<view class="form_split_10"></view>
		<view>
			<view class="u-skeleton">
				<view class="box_wrapper">
					<view class="box_1">
						<view class="item">
							<view class="tx1" :class="LoginType == 2 ? ' personal' : ''">
								<view class="order_ico"
									:class=" info.service_type + (LoginType == 2 ? ' personal' : '') "></view>
								<view class="name">{{ info.service_name }}</view>
								<view class="des">{{ shortDesc }}</view>
							</view>
						</view>
					</view>
					<view class="form_split_10" v-if="info.extra.jobname !== undefined"></view>
					<view class="box_2" v-if="info.extra.jobname !== undefined">
						<view class="item">
							推广职位
							<view class="right_txt">{{ info.extra.jobname }}</view>
						</view>
					</view>
					<view class="form_split_10" v-if="info.extra.tag_text !== undefined"></view>
					<view class="box_2" v-if="info.extra.tag_text !== undefined">
						<view class="item">
							使用标签
							<view class="right_txt">{{ info.extra.tag_text }}</view>
						</view>
					</view>
					<view class="form_split_10"></view>
					<view class="box_2">
						<view class="item">
							服务内容
							<view class="right_txt">{{ info.service_type_text }}</view>
						</view>
						<view class="item">
							服务金额
							<view class="right_txt">
								<text class="for">￥</text>
								{{ info.service_amount }}
							</view>
						</view>
						<view class="item" v-if="info.extra.preferential_info !== undefined">
							限时特惠
							<view class="right_txt">
								<text class="for">￥</text>
								{{ info.extra.preferential_info.amount }}
								<text style="color:#999999">
									({{ info.extra.preferential_info.starttime | dateFilter }} 至
									{{ info.extra.preferential_info.endtime | dateFilter }})
								</text>
							</view>
						</view>
						<view class="item" v-if="info.extra.coupon_info !== undefined">
							优惠券
							<view class="right_txt">{{ info.extra.coupon_info.name }}</view>
						</view>
						<view class="item" v-if="info.extra.coupon_info !== undefined">
							优惠券抵扣
							<view class="right_txt">
								-
								<text class="for">￥</text>
								{{ info.extra.coupon_info.face_value }}
							</view>
						</view>
						<view class="item" v-if=" info.extra.service_added_discount !== undefined && info.extra.service_added_discount > 0 ">
							专享折扣
							<view class="right_txt">
								增值服务{{ info.extra.service_added_discount }}折
							</view>
						</view>
						<view class="item" v-if=" info.extra.service_added_discount !== undefined && info.extra.service_added_discount > 0 ">
							折扣金额
							<view class="right_txt">
								<text class="for">￥</text>
								{{ info.service_amount_after_discount }}
							</view>
						</view>
						<view class="item" v-if="info.deduct_points > 0">
							{{ points_byname }}抵扣
							<view class="right_txt">
								-
								<text class="for">￥</text>
								{{ info.deduct_amount }}
							</view>
						</view>
						<view class="item" v-if="info.service_type == 'points'">
							充值{{ points_byname }}
							<view class="right_txt">
								{{ info.extra.add_points }}{{ points_byname }}
							</view>
						</view>
						<view class="item">
							应付金额
							<view class="right_txt">
								<text class="color_or">
									<text class="for">￥</text>
									{{ info.amount }}
								</text>
							</view>
						</view>
					</view>
					<view class="form_split_10"></view>
					<view class="box_5">
						<view class="box_head">订单信息</view>
						<view class="item">
							订单编号：
							<text class="txt">{{ info.oid }}</text>
						</view>
						<view class="item">
							创建时间：
							<text class="txt">{{ info.addtime | timeFilter }}</text>
						</view>
						<view class="item" v-if="info.status != 2">
							付款时间：
							<text class="txt" v-if="info.status == 0">待付款</text>
							<text class="txt" v-else>{{ info.paytime | timeFilter }}</text>
						</view>
						<view class="item">
							支付渠道：
							<text class="txt">
								{{ info.payment_text == "" ? "无" : info.payment_text }}
							</text>
						</view>
					</view>
					<view class="form_split_10"></view>
					<view class="box_3">
						<view class="primary">
							<u-button class="primary" type="primary" shape="circle" v-if="info.status == 0" @click="showPayment = true">
								继续支付
							</u-button>
						</view>
						<view class="cancel">
							<u-button class="cancel" shape="circle" plain v-if="info.status == 0" @click="handlerCancel">
								取消订单
							</u-button>
						</view>
						<view class="cancel">
							<u-button class="cancel" shape="circle" plain v-if="info.status == 2" @click="handlerDel">
								删除订单
							</u-button>
						</view>
						
					</view>
				</view>
			</view>
			<!-- <u-skeleton :loading="mainLoading"></u-skeleton> -->
		</view>
		<u-popup v-model="showPayment" closeable mode="bottom">
			<PopupPayment :amount="info.amount" @handlerSubmit="handlerSubmit"></PopupPayment>
		</u-popup>
		<!-- 是否取消订单 -->
		<u-modal v-model="isCancelOrder" title="系统提示" content="确定取消该订单吗？" @cancel="handleHideCanceModal" :show-cancel-button="true" @confirm="cancelOrderConfirm"></u-modal>
		<!-- 删除订单 -->
		<u-modal v-model="isdelOrder" title="系统提示" content="确定删除该订单吗？" @cancel="handleDelOrderModal" :show-cancel-button="true" @confirm="handleDelOrder"></u-modal>
		<PaySubmit ref="paySubmit" :payment="payment" success-url="/commonViews/service/OrderList"></PaySubmit>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import PaySubmit from '@/components/service/PaySubmit'
	import PopupPayment from '@/components/service/PopupPayment'
	import {
		parseTime,getParam
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'OrderDetail',
		components: {
			PopupPayment,
			PaySubmit
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}:{s}')
			},
			dateFilter(timestamp) {
				return parseTime(timestamp, '{m}-{d}')
			}
		},
		data() {
			return {
				mainLoading: true,
				showPayment: false,
				order_id: 0,
				info: {
					extra: {}
				},
				payment: 'wxpay',
				shortDesc: '',
				isCancelOrder:false,
				isdelOrder:false
			}
		},
		computed: {
			...mapState({
				points_byname: state => state.config.points_byname,
				LoginType: state => state.LoginType
			})
		},
		mounted() {
			this.order_id = getParam().id
			this.fetchData()
		},
		methods: {
			fetchData() {
				let url =
					this.$store.state.LoginType == 1 ?
					api.company_orderdetail :
					api.personal_orderdetail
				http
					.get(url, {
						id: this.order_id
					})
					.then(res => {
						this.info = {
							...res.data.data
						}
						this.shortDesc = this.filterDesc(this.info)
						this.mainLoading = false
					})
					.catch(() => {})
			},
			filterDesc(info) {
				let return_str = ''
				switch (info.service_type) {
					case 'points':
						return_str =
							'做任务免费得' +
							this.$store.state.config.points_byname +
							'，小' +
							this.$store.state.config.points_byname +
							'大用处'
						break
					case 'setmeal':
						return_str = '套餐服务期：' + info.extra.days + '天'
						break
					case 'jobstick':
						return_str = '锁定好位，提高职位曝光量'
						break
					case 'emergency':
						return_str = '急聘职位优先推荐，专属标识'
						break
					case 'resume_package':
						return_str = '超值简历下载叠加包'
						break
					case 'refresh_job_package':
						return_str = '自动抢占招聘先机'
						break
					case 'single_job_refresh':
						return_str = '单次刷新职位-快捷支付'
						break
					case 'single_resume_down':
						return_str = '单次下载简历-快捷支付'
						break
					case 'stick':
					case 'tag':
						return_str = ''
						break
				}
				return return_str
			},
			handlerSubmit(payment) {
				this.payment = payment
				let url =
					this.$store.state.LoginType == 1 ?
					api.company_repay :
					api.personal_repay
				this.$refs.paySubmit.handlerSubmit(url, {
					id: this.order_id,
					payment: this.payment
				})
			},
			handleHideCanceModal() {
				this.isCancelOrder = true
			},
			handlerCancel(){
				this.isCancelOrder = true
			},
			//取消订单
			cancelOrderConfirm(){
				let that = this
				let url =
					this.$store.state.LoginType == 1 ? api.company_order_cancel : api.personal_order_cancel
				http
					.post(url, {
						id: this.order_id
					})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success'
						})
						setTimeout(() => {
							this.fetchData()
							// uni.navigateBack({
							// 	delta:1
							// })
						}, 1500)
					}) 
					.catch(() => {})
			},
			/**
			 * 关闭弹窗
			 * */
			handleShowModal(){
				this.isCancelOrder = false
			},
			/**
			 * 删除订单弹窗开启
			 * */
			handlerDel() {
				this.isdelOrder = true
			},
			handleDelOrder(){
				let that = this
				let url =
					this.$store.state.LoginType == 1 ? api.company_order_del : api.personal_order_del
				http
					.post(url, {
						id: this.order_id
					})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						}, 1500)
					})
					.catch(() => {})
			},
			/**
			 * 删除订单弹窗关闭
			 * */
			handleDelOrderModal(){
				this.isdelOrder = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_3 {
		.cancel {
			margin-top: 18rpx;
		}

		padding: 50rpx;
		.primary{
			margin-bottom: 20rpx;
		}
	}

	.box_5 {
		.item {
			.txt {
				margin-left: 32rpx;
				color: #333333;
			}

			position: relative;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #666666;

			&:not(:last-child) {
				margin-bottom: 30rpx;
			}
		}

		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 0 0 40rpx;
	}

	.box_2 {
		.item {
			.self_check {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0, -50%);
			}

			.right_txt {
				&.check {
					padding-right: 40rpx;
				}

				.for {
					font-size: 18rpx;
				}

				.color_or {
					color: #ff6600;
				}

				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0, -50%);
				color: #333333;
			}

			position: relative;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #666666;

			&:not(:last-child) {
				margin-bottom: 30rpx;
			}
		}

		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 34rpx 0;
	}

	.box_1 {
		.item {
			.tx1 {
				&.personal {
					padding-left: 190rpx;
				}

				.order_ico {
					&.personal {
						width: 160rpx;
						border-radius: 14rpx;
					}

					&.stick {
						background-image: url($ImgUrl + "order_ico_top.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 160rpx 100rpx;
					}

					&.tag {
						background-image: url($ImgUrl + "order_ico_tag.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 160rpx 100rpx;
					}

					&.points {
						background-image: url($ImgUrl + "company_order_ico_jfcz.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.jlkjxz {
						background-image: url($ImgUrl + "company_order_ico_jlkjxz.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.setmeal {
						background-image: url($ImgUrl + "company_order_ico_tcsj.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.emergency {
						background-image: url($ImgUrl + "company_order_ico_zwjj.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.jobstick {
						background-image: url($ImgUrl + "company_order_ico_zwzd.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.refresh_job_package {
						background-image: url($ImgUrl + "company_order_ico_zwznsx.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					&.resume_package {
						background-image: url($ImgUrl + "company_order_ico_jlzzb.png");
						background-repeat: no-repeat;
						background-position: 0;
						background-size: 100rpx;
					}

					position: absolute;
					left: 6rpx;
					top: 20rpx;
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
				}

				.des {
					padding: 0 20rpx 40rpx 0;
					font-size: 26rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.name {
					padding: 30rpx 20rpx 20rpx 0;
					font-size: 30rpx;
					color: #666666;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				position: relative;
				padding-left: 130rpx;
			}

			width: 100%;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 0 30rpx;
			position: relative;
		}

		width: 100%;
	}

	.box_head {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		padding: 30rpx 0 30rpx 30rpx;
		font-size: 28rpx;
		color: #333333;
		position: relative;

		&::after {
			content: " ";
			position: absolute;
			width: 5rpx;
			height: 28rpx;
			background-color: #1787fb;
			left: 16rpx;
			top: 50%;
			transform: translate(0, -50%);
		}
	}

	.box_wrapper {
		width: 100%;
	}

	.notice_bar {
		width: 100%;
		padding: 22rpx 0 22rpx 70rpx;
		font-size: 24rpx;
		color: #ff6600;
		background-image: url($ImgUrl + "remind_ico.svg");
		background-color: #fffbeb;
		background-repeat: no-repeat;
		background-position: 32rpx center;
		background-size: 32rpx;
	}
</style>
